<template>
    <div class="department-link-box">
        <div style="padding: 15px 15px 0 15px;">
            <a-breadcrumb>
                <a-breadcrumb-item>药品生产查询统计</a-breadcrumb-item>
                <a-breadcrumb-item>科室环节工作量</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <div style="padding: 15px 15px 0 15px;">
            <span>查询时间：</span>
            <a-range-picker v-model:value="timeArr"  @change="queryTimeChange"/>
            <a-button class="blue-btn" style="margin: 10px;" type="primary" @click="searchForClick">搜索</a-button>
            <a-button @click="resettingClick">重置</a-button>
        </div>
        <div style="padding: 15px;">
            <a-collapse v-model:activeKey="activeKey" class="tabs-collapse-box">
                <a-collapse-panel key="1" header="列表信息">
                    <!-- <template #extra>
                        <span v-if="activeKey.indexOf('1') !== -1" @click="activeKey = activeKey.filter(item => item !== '1')">折叠</span>
                        <span v-else @click="activeKey.push('1')">展开</span>
                    </template>-->
                    <div style="padding: 15px;" :key="defreshDataKey">
                        <table class="table-v" border="1" style="border-color:#dedcdc;width: 100%;">
                            <tr style="background-color: #dee5ed;">
                                <th>环节名称</th>
                                <th>总量</th>
                                <th>已办量</th>
                                <th>待办量</th>
                                <th>待办超期量</th>
                            </tr>
                            <tr v-for="(item,index) in tableData" :key="item.node" :style="{backgroundColor: index % 2 == 0?'':'#dee5ed'}">
                                <td>{{item.node}}</td>
                                <td>{{item.count}}</td>
                                <td>{{item.ybsl}}</td>
                                <td>{{item.dbsl}}</td>
                                <td>{{item.dbcqs}}</td>
                            </tr>
                        </table>
                    </div>
                </a-collapse-panel>
            </a-collapse>
        </div>
        <div style="width: 100%;height: 400px;" :key="defreshDataKey">
            <div class="ringDiagram-comp" :id="containerId"></div>
        </div>
    </div>
</template>
<script>
import {listServe} from './service/index'
import moment from 'moment'
export default {
    components:{
        
    },
    props:{

    },
    data(){
        return{
            containerId:'c'+ new Date().getTime(),
            tableData:[],
            Xlist:[],
            countList:[],
            dbcqsList:[],
            dbslList:[],
            ybslList:[],
            activeKey:[],
            timeData:{startTime:'',endTime:''},
            timeArr:[],
            defreshDataKey:null,
        }
    },
    watch:{

    },
    mounted(){
        this.getData()
        
    },
    methods:{
        getData(val){
            let data = {}
            if(val){
                data = {fywflcode:'001002',...val}
            }else{
                data = {fywflcode:'001002'}
            }
            listServe(data).then(res=>{
                if(res.code == 200){
                    res.result[0].tjList.forEach((item,index) => {
                        if(this.Xlist.indexOf(item.node) == -1){
                            this.countList.push(item.count)
                            this.dbcqsList.push(item.dbcqs)
                            this.dbslList.push(item.dbsl)
                            this.ybslList.push(item.ybsl)
                            this.Xlist.push(item.node)
                        }
                        if(this.Xlist.length == res.result[0].tjList.length){
                            this.getContainerStructure(this.Xlist,this.countList,this.dbcqsList,this.dbslList,this.ybslList)
                        }
                    });
                    this.tableData = res.result[0].tjList
                }
            })
        },
        getContainerStructure(xVal,y1Val,y2Val,y3Val,y4Val){
            var app = {};
            var chartDom = document.getElementById(this.containerId);
            var myChart = this.$echarts.init(chartDom);
            var option;
            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };
            app.config = {
                rotate: 0,
                align: 'center',
                verticalAlign: 'bottom',
                position: 'insideBottom',
                distance: 1,
                onChange: function () {
                    const labelOption = {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                    };
                    myChart.setOption({
                    series: [
                        {
                            label: labelOption
                        },{
                            label: labelOption
                        },{
                            label: labelOption
                        },{
                            label: labelOption
                        }
                    ]
                    });
                }
            };
            const labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: function (params) {
                    let txtArry = (params.value+params.seriesName).split('');
                    let rs = "";
                    for (var i = 0; i < txtArry.length; i++) {
                        rs += txtArry[i] + "\n";
                    }
                    return rs;
                },
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            option = {
                dataZoom: [
                    {
                        type: 'slider', // 使用滑动条形式的数据区域缩放
                        show:true,
                        startValue: 0, // 展示区域内容的起始数值
                        endValue: 6, // 展示区域内容的结束数值
                        height: 10, // 滑动条组件高度
                        bottom: 1, // 距离图表区域下边的距离
                        showDetail: false, // 拖拽时是否显示详情
                        showDataShadow: false, // 是否在组件中显示数据阴影
                        fillerColor: '#dbdee5', // 平移条的填充颜色  
                        borderColor: 'transparent', // 边框颜色
                        zoomLock: true, // 锁定视图
                        brushSelect: false, 
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                legend: {
                    data: ['总量', '已办量', '待办量', '待办超期量']
                },
                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        axisLabel:{
                            textStyle: {
                                color:'#000',
                                fontSize:'14',
                            }
                        },
                        data: xVal
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '总量',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: y1Val,
                        barWidth: 25
                    },
                    {
                        name: '已办量',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: y2Val,
                        barWidth: 25
                    },
                    {
                        name: '待办量',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: y3Val,
                        barWidth: 25,
                    },
                    {
                        name: '待办超期量',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: y4Val,
                        barWidth: 25,
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        queryTimeChange(val){
            //console.log(val)
            this.timeData.startTime = moment(val[0]).format('YYYY-MM-DD')+' 00:00:00'
            this.timeData.endTime = moment(val[1]).format('YYYY-MM-DD')+' 00:00:00'
        },
        searchForClick(){
            this.getData(this.timeData)
            this.defreshDataKey = Date.now()
        },
        resettingClick(){
            this.timeArr = []
            this.getData()
            this.defreshDataKey = Date.now()
        }
    }
}
</script>
<style lang="less">

.department-link-box{
    background-color: #fff;
    .table-v{
        td,th{
            padding: 5px;
            text-align: center;
        }
        td{
            font-weight: 600;
        }
    }
    .ringDiagram-comp{
        width: 100%;
        height: 450px;
    }
    .blue-btn{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
    .red-btn{
        border: 1px solid #ed5565 !important;
        background-color: #ed5565 !important;
    }
    // .ant-collapse{
    //     background-color: #5ca3e5 !important;
    //     // border:1px solid #5ca3e5 !important;
    //     border-bottom: 0 !important;
        
    // }
    // .ant-collapse-header{
    //     color: #fff !important;
    // }
}
</style>